<template>
  <el-dialog
    v-model="dialogVisibled"
    title="选择系统用户"
    width="1000"
    :style="{ height: '600px' }"
    :draggable="true"
    :before-close="handleClose"
    @open="handleDialogOpen"
  >
    <div style="display: flex; flex-direction: column; height: 530px">
      <div class="custom-divider-top"></div>
      <!-- <el-row class="rowNavStyle">
      <el-col :span="24" class="colNavStyle"> sdfasdfa </el-col>
    </el-row> -->
      <el-table
        :data="tableData"
        stripe
        :border="true"
        row-key="userId"
        highlight-current-row
        ref="userRef"
        @current-change="currentUserClick"
        default-expand-all
        v-loading="loading"
      >
        <el-table-column width="35">
          <template #default="scope">
            <el-radio
              class="radio"
              :label="scope.row.userId"
              v-model="selectDataId"
            ></el-radio>
          </template>
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户名称"
          align="center"
          width="100"
        />
        <el-table-column prop="corporationName" label="所属公司" />
        <el-table-column
          prop="departmentName"
          label="所在部门"
          align="center"
          width="150"
        />
        <el-table-column prop="age" label="年龄" align="center" width="80">
          <template #default="model">
            <el-tag v-if="model.row.age >= 40" type="warning">{{
              model.row.age
            }}</el-tag>
            <el-tag v-else-if="model.row.age <= 20" type="success">{{
              model.row.age
            }}</el-tag>
            <el-tag v-else>{{ model.row.age }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" align="center" width="80">
          <template #default="model">
            <el-tag v-if="model.row.sex == 1" type="primary">男</el-tag>
            <el-tag v-if="model.row.sex == 2" type="danger">女</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="isOpen"
          label="是否使用"
          align="center"
          width="100"
        >
          <template #default="model">
            <el-switch
              :before-change="switchClick"
              v-model="model.row.isOpen"
              class="ml-2"
              inline-prompt
              style="
                --el-switch-on-color: #13ce66;
                --el-switch-off-color: #ff4949;
              "
              active-text="启用中"
              inactive-text="关闭中"
            />
          </template>
        </el-table-column>
      </el-table>
      <pageLayout :pageData="page" @pageBnt="pageClick"></pageLayout>
      <div style="margin-top: auto">
        <div class="custom-divider-bottom"></div>
        <div style="justify-content: right; align-items: right; display: flex">
          <el-button type="success" icon="Check" @click="confirmSelectClick">
            确认选择
          </el-button>
          <!-- <el-button
          type="warning"
          icon="RefreshRight"
          @click="resetForm(ruleFormRef)"
          >重置</el-button
        > -->
          <el-button type="danger" icon="Close" @click="handleClose"
            >关闭</el-button
          >
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { getCorporationUser } from "@/api/user";
import { SysUserOutPut } from "@/model/user/user";
import { computed, defineComponent, reactive, ref } from "vue";
import pageLayout from "@/components/page.vue";
import { basePageModel, pageCofing } from "@/model/public/public";
import { useUserStore } from "@/store/user";
export default defineComponent({
  props: {
    isVisibles: {
      type: Boolean,
    },
    userId: {
      type: String,
      required: true,
    },
    menuId: {
      type: String,
      required: true,
    },
  },

  setup(props, context) {
    const userStore = useUserStore();
    //用户table
    const userRef = ref();
    //选中数据id
    const selectDataId = ref<string>(props.userId);
    //选中数据
    const selectData = ref<SysUserOutPut>();
    //加载状态
    const loading = ref(true);
    //table数据
    const tableData = ref<SysUserOutPut[]>([]);
    //查询条件
    const searchFilter = reactive<any>({
      CorporationKey: userStore.corporationKey,
      SystemKey: "",
      MenuId: props.menuId,
      ButtonId: "",
    });
    //分页
    const page = reactive<basePageModel>({
      currentPage: pageCofing.currentPage,
      pageSize: pageCofing.pageSize,
      total: pageCofing.total,
    });

    //禁止点页面的滑块
    const switchClick = function () {
      return new Promise((_, reject) => {
        return reject(new Error("Error"));
      });
    };

    //打开时加载
    const handleDialogOpen = function () {
      page.currentPage = 1;
      getUserMsg();
    };

    //获取table数据
    const getUserMsg = () => {
      getCorporationUser({
        currentPage: page.currentPage,
        pageSize: page.pageSize,
        filterJson: JSON.stringify(searchFilter),
      })
        .then(({ data, code, total }) => {
          if (code == 200) {
            tableData.value = data;
            page.total = total;
            setCurrentSelect(props.userId);
            loading.value = false;
          }
        })
        .catch(() => {
          loading.value = false;
        });
    };

    //分页点击事件
    const pageClick = function (basePageModel: basePageModel) {
      page.currentPage = basePageModel.currentPage;
      page.pageSize = basePageModel.pageSize;
      getUserMsg();
    };

    //是否显示dialog
    const dialogVisibled = computed(() => {
      return props.isVisibles;
    });

    //关闭事件
    const handleClose = () => {
      context.emit("closeBnt");
    };

    //当前用户事件
    const currentUserClick = function (value: SysUserOutPut) {
      selectDataId.value = value.userId;
      selectData.value = value;
    };

    //设置当前选中值
    const setCurrentSelect = (userId: string | undefined) => {
      selectDataId.value = "";
      const userModel = tableData.value.find((f) => f.userId === userId);
      selectData.value = userModel;
      if (userModel === undefined) {
        userRef.value!.setCurrentRow();
      } else {
        selectDataId.value = userId ?? "";
        userRef.value!.setCurrentRow(userModel);
      }
    };

    //确认选择
    const model = ref({
      key: "",
      value: "",
    });
    const confirmSelectClick = function () {
      model.value.key = selectData.value?.userId ?? "";
      model.value.value = selectData.value?.userName ?? "";
      context.emit("confirmBnt", model.value);
    };
    return {
      switchClick,
      currentUserClick,
      confirmSelectClick,
      handleDialogOpen,
      handleClose,
      pageClick,
      loading,
      tableData,
      dialogVisibled,
      userRef,
      selectDataId,
      page,
    };
  },
  components: { pageLayout },
});
</script>
<style scoped>
</style>